<template>
	<view class="split-row" :style="{'--height':height+'px'}">

		<!-- 拆分{{splitTotalQty}}-{{splitIndex}} -->
		<view class="split-title">

			<view class="left">总数量{{splitTotalQty}}</view>

			<view class="right">
			<!-- 	<view >
			
					<u--text size="15px" text="笔数:"></u--text>
				</view> -->
				<view class="z-input">
					<input v-model="row" style="font-size: 15px; text-align: center;" class="uni-input" type="number" placeholder="笔数" />
				</view>
				<view class="">
					<u-button type="primary" @click="splitButtonEv" size="mini" text="拆分"></u-button>
				</view>
			</view>

		</view>
		<view class="split-data">
			<view class="split-data-itm" v-for="(item,index) in dataList" :key="item.key">
				<view class="left">
					项次{{index+1<10? '0'+(index+1) :index+1}}
				</view>
				<view class="right">
					<input v-model="item.qty" style="font-size: 15px; width: 100%;" class="uni-input" type="number" placeholder="笔数" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "splitRow",
		props: ['splitTotalQty', 'splitIndex'],
		data() {
			return {
				// 拆分笔数
				row: 2,
				dataList: [],
				// 元素的高度
				height: parseInt(uni.getWindowInfo().windowHeight / 2),
			}
		},
		methods:{
			splitButtonEv() {
				console.log(parseInt(this.row))
				let row_z = parseInt(this.row) 
				
				if(isNaN(row_z)  == true) {
					uni.showModal({
						content: '拆分笔数输入错误',
						showCancel: false
					});
					return
				}
				let row_qty =  Math.floor(this.splitTotalQty / row_z)
				this.dataList = []
				for (var i = 0; i < row_z; i++) {
					console.log(i)
					this.dataList.push({qty:row_qty,key:i})
				}
				console.log(row_qty)
				console.log('点击拆分')
			},

		}
	}
</script>

<style lang="scss">
	.split-row {

		width: 100%;
		height: var(--height);
	}

	.split-title {
	
		height: 40px;
		line-height: 40px;
		display: flex;
		width: 100%;
		.left {
			width: 80px;
		}
		.right {
			width: calc(100% - 80px);
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}

	.split-data {
		height: calc(100% - 40px);
		color: #8f9ca2;
		overflow: hidden;
		overflow-y: scroll;
		.split-data-itm {
			display: flex;
			align-items: center;
			height: 40px;
			line-height: 40px;
			.left {
				width: 60px;
				font-size: 15px;
			}
			.right {
				width: calc(100% - 60px);
			}
		}
	}

</style>